import React, {Component} from 'react';

require('./css/frame.css');


const words=[
  <div><p>目标即…车辆重启后，在充分考虑舒适度和效率的前提下，让空调系统尽快将车内温度调整到舒适的水平。由此在脚部空间和空调出风口之间呈现出温差在 10–15℃ 的某种温度分层结构。</p></div>,

  <div><p>如果车内温度较高，则首先让新风进入车内。为此空气再循环风门开启，并保持几分钟。</p></div>,

  <div><p>然后系统切换至空气再循环模式，再切换至部分空气再循环模式。为此，蒸发器温度调整至 2~10℃。系统不断评估风挡玻璃露点温度。系统不仅高效运行，还能为车内打造湿度和温度均让人感到舒适的气候区。</p></div>,

  <div><p>系统通过这种方式对空调压缩机、风量以及风量分配情况进行优化调节。达到环保更优。</p></div>,

]

export default class P30 extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
      index: [1, 0],
      subindex: 0,
      showflag:['none','none','none']
    };
  }

  onSlider(i) {
    let index = [0, 0];
    index[i] = 1;
    this.setState({
      index
    });
  }

  onClick(i) {
    this.setState({
      subindex:i
    });
  }
  showDiv(i) {
    const {showflag} = this.state;
    showflag[i]='block';
    this.setState({
      showflag
    });
  }

  render() {
    const {index, subindex,showflag} = this.state;
    return (
      <div id="page">
        <div className="content" id="box30">
          <h4 className="title">空调系统</h4>
          <div className='infodiv'>以下是探岳 TAYRON空调系统的新特征，请点击图标，查看详细介绍。</div>

          {index[0] === 1 && <div className='box30Cont' id='box300'>

            <img className='box30btn' src={require('./img/30_0.png')} style={{left: 110}}
                onClick={this.showDiv.bind(this,0)}/>
            <img className='box30btn' src={require('./img/30_1.png')} style={{left: 410}}
                 onClick={this.showDiv.bind(this,1)}/>
            <img className='box30btn' src={require('./img/30_2.png')} style={{left: 730}}
                 onClick={this.showDiv.bind(this,2)}/>

            <div style={{left:50,display:showflag[0]}}>
              <p>通过对压缩机的改进，减少空调不使用时压缩机的输出，从而降低发动机功能消耗，节省燃油降低排放；
                通过对蒸发器温度的控制来降低空调工作时压缩机的功率消耗，从而减少排放。</p>
              <img src={require('./img/30_3.png')} />
            </div>
            <div style={{left:350, display:showflag[1]}}>
              <p>增加空气湿度监控、改进空气质量监控从而提高空调运行的舒适度，
                自动空调控制功能以及智能的内循环功能同样提高了舒适感受。</p>
              <img src={require('./img/30_4.png')} />
            </div>
            <div style={{left:650,display:showflag[2]}}>
              <p>空调的软按键功能，将空调操作简化同时提高安全性（不用再低头，视线转移小）
                ；自动功能及系统监控减小空调使用时“结雾”的现象，提高安全性。</p>
              <img src={require('./img/30_5.png')} />
            </div>

          </div>}

          {index[1] === 1 && <div className='box30Cont' id='box301'>
            <img src={require('./img/30_1.jpg')} style={{marginTop: 60}}/>
            <div className={subindex===0 ?'box301btn_on':'box301btn' } style={{left:373}}
                onClick={this.onClick.bind(this,0)}></div>
            <div className={subindex===1 ?'box301btn_on':'box301btn' } style={{left:505}}
                 onClick={this.onClick.bind(this,1)}></div>
            <div className={subindex===2 ?'box301btn_on':'box301btn' } style={{left:645}}
                 onClick={this.onClick.bind(this,2)}></div>
            <div className={subindex===3 ?'box301btn_on':'box301btn' } style={{left:780}}
                 onClick={this.onClick.bind(this,3)}></div>

            <div id="box301ctn">
              {words[subindex]}
            </div>
          </div>}

          <div id="csld" className="sldcir" style={{left: 440}}>
            {index.map((item, i) => {
              let sr = (item === 1 ? 'son' : 'soff');
              return (
                <img key={i} src={require('./img/' + sr + '.png')} onClick={this.onSlider.bind(this, i)}/>);
            })}
          </div>

        </div>
      </div>
    );
  }
}


